<template>
    <div>
        <el-dialog v-dialogDrag title="合作商Logo" :visible="editShow" width="40%" @close="dialogClose">
            <el-form ref="editForm" :model="formFileds" :rules="rules" label-width="auto">
                
                <el-form-item label="logo：">
                    <!-- <el-upload class="avatar-uploader" :action='logo' list-type="picture-card" :show-file-list="false"
                        :on-success="logohandleAvatarSuccess" :disabled=true> -->
                        <img v-if="logoUrl" :src="logoUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                   <!--  </el-upload> -->
                </el-form-item>
                <el-form-item label="合作商名称：" prop="partnername">
                    <el-input type="text" v-model="formFileds.partnername"></el-input>
                </el-form-item>
                <el-form-item label="跳转路径：" prop="jump">
                    <el-input type="text" v-model="formFileds.jump" placeholder="http://... 或 https://...">
                    </el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="remark">
                    <el-input type="textarea" v-model="formFileds.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定
                    </el-button>
                    <el-button @click="dialogClose" class="pull-right">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { uplogo } from '@/api/systemManage/logoManage'
export default {
    //接受父组件
    props: {
        editShow: {
            type: Boolean
        },
        record: {
            type: Object
        }
    },

    data () {
        return {
            logo: 'api/plogo',
            logoUrl: '',
            formFileds: {},
            rules: {
                partnername: [{
                    required: true,
                    message: '请输入合作商名称',
                    trigger: 'blur'
                }],
                /* jump: [{
                    required: true,
                    message: '请输入跳转路径',
                    trigger: 'blur',
                }], */
                // logo: [{
                //     required: true,
                //     message: ' ',
                //     trigger: 'change'
                // }],

            },
        }
    },
    methods: {
        
        logohandleAvatarSuccess (file) {
            this.formFileds.url = file.data
            this.logoUrl = file.data
        },
        dialogClose () {
            this.$emit('dialogClose')
        },
        submitForm () {
            this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        if (this.formFileds.status == true) {
                                this.formFileds.status = 0;
                            } else {
                            this.formFileds.status = 1;
                            }
                              this.$delete(this.formFileds, "createTime");
                    // console.log("各种参数  ：" + JSON.stringify(this.formFileds))
                    uplogo(this.formFileds).then((res) => {
                        this.$message.success('修改成功！')
                        this.$emit('getList')
                        this.$emit('dialogClose')
                    })
                }
                else {
                    return
                }
            });
        },
    },
    mounted () {
        this.formFileds = Object.assign({}, this.record);
        this.logoUrl = this.record.url
    }
}
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
}

.avatar {
    width: 146px;
    height: 146px;
    object-fit: contain;
    display: block;
}
</style>